<template>
  <div class="dashboard-container">
    <div class="dashboard-text">name: {{ name }}</div>
    <!-- 省的点击小箭头    菜单是广东   湖北   湖南
   el-dropdown
       默认插槽显示看得到的内容
       具名插槽，鼠标移入时显示的菜单
          template #dropdown
          el-dropdown-menu
              el-dropdown-item

    点击事件
       el-dropdown-item   command="标识"
       el-dropdown  @command="(command)=>{command的值就是点击项的command的标识}"

   -->
    <el-dropdown @command="commandEvent">
      <span>省的选择<i class="el-icon-arrow-down el-icon--right" /></span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item command="1">广东</el-dropdown-item>
          <el-dropdown-item command="2"> 湖北</el-dropdown-item>
          <el-dropdown-item command="3">湖南</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>

    <h3>菜单</h3>
    <!--
   菜单：
      el-menu   default-active:默认选中哪一项  router:是否开启路由模式，开启后子项的index的值就是路由跳转的path地址
         el-menu-item:子菜单（没有子集的写法）  index:它的值与default-active对应,如果开启路由模式，它的值就是路由的跳转path
             默认插槽：图标
             具名插槽(title)：菜单名

 -->

    <el-menu :default-active="$route.path" class="el-menu-vertical-demo" router>
      <template v-for="(item, index) in $router.options.routes">
        <el-menu-item v-if="!item.hidden" :key="index" :index="item.path">
          <i class="el-icon-menu" />
          <span slot="title">{{ item.children[0].meta.title }}</span>
        </el-menu-item>
      </template>
    </el-menu>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'Dashboard',
  computed: {
    ...mapGetters(['name'])
  },
  methods: {
    commandEvent(command) {
      console.log(command)
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
